Tabs, Used Right標籤tab

標籤頁讓使用者可以從多個選項中選擇並檢視其中一個內容面板。

從使用者體驗角度看，標籤頁設計包含以下幾個部分：

標籤列表：所有標籤的水平排列列表

標籤名稱：簡潔地描述標籤內容

內容面板：顯示當前選中標籤內容的區域

選中指示符：標記當前顯示內容所屬標籤的視覺提示

點選或點選標籤名稱就可以切換到對應的標籤內容。

標籤頁透過把內容分類和隱藏起來，等使用者點選時再顯示，來簡化介面。傳統的標籤樣式（上方）看起來像檔案櫃裡的物理資料夾，而現代設計（下方）則透過減少或去掉標籤和麵板的邊框線條，使得標籤更容易融入整體佈局，看起來更加簡潔統一。

選項卡控制元件包含可用選項卡列表、描述選項卡內容的短標籤、標記所選選項卡的一個或多個指示符以及僅顯示所選選項卡內容的面板。

除了這些常見元素外，複雜應用程式中可能還會包含其他輔助功能來幫助使用者使用標籤頁。包括以下幾種：

圖示（最好與標籤名稱一起使用，以便使用者能夠更清楚地識別標籤內容）

新增、關閉、重新命名或複製標籤頁（這些操作允許使用者根據需要動態調整標籤頁，提高操作的靈活性和個性化體驗）

透過拖拽重新排序標籤（允許使用者根據個人習慣或需求改變標籤順序，提升頁面的可操作性）

滾動檢視標籤列表（當所有標籤無法在螢幕中完全顯示時，可以透過滾動檢視剩餘標籤，如輪播式標籤頁，使使用者能夠訪問所有選項）

何時使用標籤頁：

用標籤頁展示長而分組清晰的內容，可將資訊分割成易於瀏覽的小塊，避免資訊過載。

適用於少量分組，過多標籤會增加操作複雜度。標籤數量越少越好。

適用於內容重要性不均時。預設標籤更受關注，非預設標籤適合放置輔助資訊。

內容應可用簡潔標籤標註。短標籤名更佳，節省空間，避免水平滾動。

適用於不需同時檢視多個標籤內容時。若需頻繁切換對比，考慮使用單一頁面展示所有資訊。

❌Google的廣告管理網站用標籤頁來分類廣告主題或品牌，但這種佈局讓使用者難以全面檢視可能遇到的廣告內容，也不方便設定偏好。因為使用者要不斷切換標籤才能看到全部內容，操作起來比較麻煩。

標籤頁與手風琴式控制元件比較

手風琴控制元件適合移動裝置，可使用較長標籤名，適合FAQ等短內容。標籤頁更適合桌面裝置，可處理較長內容和複雜佈局。

標籤頁型別

頁面內標籤：在同頁面組織相關內容，用於改變面板顯示。

導航標籤：引導使用者跳轉到不同頁面，用於結構化導航。

理解兩種標籤的差異對有效應用至關重要，避免誤用導致使用者體驗不佳。

分類	導航標籤（Navigation Tabs）	頁面內標籤（In-page Tabs）
內容（Content）	範圍廣泛	範圍狹窄
	彼此無關	彼此相關
	內容不同	內容相似
位置（Location）	位於視口頂部或左側	位置不固定，通常嵌入在頁面佈局內
	移動端上常位於底部
滾動位置（Scrolling Position）	有時固定在視口頂部（或底部）	很少固定
使用者期望（User Expectations）	導航到新檢視	保持在當前檢視
	可能有載入延遲	立即載入
預設選中標籤（Default Selected Tab）	通常會有一個預設選中的標籤，但如果當前頁面並未歸類於任何標籤且是從其他地方（如頁尾連結）訪問，則可能沒有預設選中的標籤	始終有一個預設選中的標籤

*雅虎財經：3 層導航選項卡暴露了幾層資訊架構（*財經、影片和影片子*類別）。*市場和計劃列表容器*中的頁內選項卡使使用者能夠在原地不動的情況下檢視內容型別。*

避免混合標籤型別

在同一控制元件中混用頁面內標籤和導航標籤會造成使用者困惑。頁面內標籤用於展示相似內容，保持使用者在當前頁面。導航標籤則用於展示不同內容，引導使用者到新頁面。兩者用途和互動方式不同，不應混用。

❌ 聖地亞哥野生動物聯盟的職業頁面混用了導航和頁面內標籤。大多數標籤顯示相似頁面的不同職業資訊，但"Careers Home"標籤跳轉到新頁面且不顯示標籤，造成使用者混淆。

頁面內標籤應在同一頁面切換相關檢視，避免跳轉中斷。其目的是分塊展示內容，減少認知負擔。每個標籤應使用相同佈局，僅展示不同資料，保持一致性以便使用者理解。

✅Google Finance這個頁面用了經典的頁面內標籤。它透過兩個標籤列表來展示金融市場表現的折線圖。第一個標籤用來選擇市場類別（這裡選中了“美國市場”），第二個用來選擇時間範圍（當前選中的是“1D”——1天）。不同標籤顯示的資料都是折線圖，使用者在切換時也不會跳轉到其他頁面，這樣使用者可以很方便地在同一個頁面比較不同的資料。

標籤頁的外觀和互動方式應當保持一致

頁面內標籤和導航標籤在內部設計上應當保持一致性（設計一致性是可用性設計的一個原則，有助於使用者建立對介面的掌控感和信任感）。對於同一個標籤控制元件，點選任意標籤都應切換其對應的面板，並且所有標籤的未選中和選中樣式應一致（即無論切換到哪個標籤，標籤的外觀及互動狀態都應保持相同）。應當使用設計系統來確保標籤控制元件在行為和視覺上的一致性（設計系統能幫助規範標籤的使用方式，從而避免設計風格上的混亂）。

當頁面內標籤和導航標籤在同一體驗中被同時使用時，必須在視覺上區分這兩種標籤型別（透過不同的樣式或提示，引導使用者識別它們在互動上的不同特性），以便使用者理解它們的不同用途和行為方式。

❌Behance.com：這個頁面內標籤有一個"Creatives for Hire"（招聘創意人才）標籤，它的外觀和功能與其他標籤不同；點選它會在新的瀏覽器標籤頁中開啟一個不同的網站。雖然新增了一個圖示試圖傳達這種功能上的差異，但這個控制元件實際上是一個偽裝成標籤的連結，不應該作為標籤控制元件的一部分。

標籤頁視覺設計：最佳實踐

標示選中的標籤：

突出顯示選中的標籤。有多種選擇指示器可以傳達這種狀態：

共同區域。這種標示選中標籤的經典方法是為選中的標籤和顯示的面板使用相同的背景填充。這種標籤填充應與其他未選中標籤使用的背景填充形成對比。如今，設計師和開發人員很少使用這種技術，因為它在協調控制元件和頁面佈局的背景填充時會增加複雜性。

線條。包含一條水平線來下劃選中的標籤。線條因其佈局靈活而成為流行選擇。不要使用細的單畫素線條或對比度低的顏色。

字型樣式。將選中標籤的文字標籤改為粗體或不同的、更深的顏色。

尺寸。調整選中標籤的大小，使其看起來比其他標籤更大。

圖示。為選中的標籤新增一個未選中標籤上沒有的獨特圖示指示器。

使用至少兩種選擇指示器來增強選中標籤的視覺顯著性。當只有兩個標籤時，多重指示器對於區分選中的標籤至關重要，因為可比較的未選中標籤較少。

✅Crateandbarrel.com：選中的標籤透過使用共同區域和字型樣式與未選中的標籤進行了區分。

❌ CNN：被選中的導航標籤（在這個例子中是"科技"）雖然被加粗了，但效果非常微妙，幾乎無法與其他標籤區分開來。

使未選中的標籤清晰可見且易讀

未選中的標籤應當保持可見，以提醒使用者還有其他選項。如果未選中的標籤過於融入背景而不易察覺，使用者可能永遠不會發現這些標籤所對應的內容。

❌ MongoDB：使用了多個導航標籤控制元件來組織複雜的技術內容。不幸的是，未選中標籤（如概覽和依賴項）的字型樣式與白色背景的對比度很差，可能會被誤認為是不可選擇的功能。

連線選中標籤與面板

共同區域作為選擇指示器可有效表明標籤與內容的關聯，但使用較少。另一種方法是利用鄰近性，尤其適用於選中標籤與面板使用不同填充顏色時。

❌PaneraBread.com：這個在訂購流程中發現的標籤與其面板連線不佳。黃色的外賣標籤、大量的內邊距以及全寬的線條都將"外賣"標籤與其面板分離並解除了關聯。

✅ macOS：這些用於組織觸控板行為的頁面內標籤雖然沒有與其面板共享一個公共區域，但儘管背景填充不同，仍然保持了緊密的鄰近性。

僅使用一行標籤頁

網站和簡單的應用程式應避免在一個標籤控制元件中堆疊標籤列表。堆疊排列會增加選擇指示器（如線條）在多個標籤標籤之間模糊定位的風險。

對於依賴共同區域的標籤樣式來說，堆疊也是無效的，因為它需要重新定位選中的標籤以使其與面板相鄰。這會破壞空間記憶，使使用者無法記住他們已經訪問過的標籤。

❌*亞馬遜：這些2000年出現在亞馬遜網站上的導航標籤是說明堆疊標籤問題的經典例子。點選後排的標籤（如*廚房）會強制進行一個困難的設計權衡：是在後排位置高亮顯示標籤但使其與面板斷開連線，還是將標籤移到前排以改善其鄰近性但重新排列標籤列表順序？從可用性的角度來看，這兩種選擇都不理想。

將標籤列表放置在面板上方

垂直和底部列表排列會導致使用者忽視標籤。頁面內標籤的視覺設計應使面板明顯可見。

❌ Okta：這些過度設計的頁面內標籤違反了多項最佳實踐。標籤被放置在內容面板的右側而不是頂部。選中的標籤僅透過微妙的文字顏色變化來區分。沒有明確的面板，因為影象和文字相距甚遠。標籤文字過長。藍色線條在不同標籤之間均勻分佈，使得區分選中的標籤變得困難。更糟糕的是——藍色線條是動畫效果，幾秒鐘後會自動選擇下一個標籤！

標籤頁內容：最佳實踐

高效安排標籤頁

安排標籤頁內容時，將高頻使用的內容放在列表的首位並預設選中。這樣可以最大化常用內容的可見性，降低互動成本。

✅ SpotHero移動應用：這個頁內標籤按狀態組織了停車位預訂。"即將到來"的預訂標籤被適當地安排在首位並預設選中，因為使用者最可能對即將到來的停車預訂感興趣並與之互動。過去或已取消的預訂也可供參考。

邏輯地組織標籤頁內容

內容的組織方式應該基於使用者對內容的感知和使用方式。卡片分類是研究這種微型資訊架構問題的一種方法。如果找不到明確的分組，那麼標籤頁可能不是管理你的內容的合適介面控制元件。在這種情況下，使用帶有子標題的單頁佈局可能更為合適。

使用描述性的標籤名稱

使用者應該能夠預測選擇一個標籤後會看到什麼內容。由於未選中的標籤會隱藏其內容，具有強烈資訊氣味的標籤對於吸引使用者點選至關重要。使用通俗易懂的語言，而不是虛構的營銷術語。

使用簡短的標籤名稱

標籤名稱通常應該是1-2個詞。簡短的標籤更易於瀏覽；如果你需要更長的標籤，這表明這些選項對於標籤來說太複雜了。

不要使用全大寫字母作為標籤名稱

全大寫字母會對可讀性產生負面影響。儘管排版研究表明，在小字型大小下，全大寫文字可能會提供一些快速瀏覽的改進，但這更多是對小字型的一種緩解，而不是一種廣泛使用的明智的視覺設計策略。因為我們在日常生活中接觸到的大多數文字都是大小寫混合的，人們不習慣瀏覽或閱讀全大寫文字（短暫的設計趨勢也不會改變這一點）。最好選擇一種大小寫風格（句子式或標題式）並堅持使用。

❌*企鵝蘭登書屋：如果這些頁內標籤的標籤文字不是全部大寫，它們的可讀性會更好。*

使標籤功能易於發現

在使用者需要管理資訊空間的複雜應用程式中，可能需要標籤管理功能（例如新增、複製或刪除標籤）。透過在標籤內嵌入控制元件來指示這些功能的存在（但要注意有問題的圖示）。在可用性測試期間監控這些功能，因為許多使用者可能不熟悉或難以找到它們。

❌Microsoft Excel for Microsoft 365：訪問與標籤相關的命令（如重新命名或刪除工作表，即標籤）需要知道右鍵點選標籤會在選單中顯示這些選項，這對新手使用者來說可能具有挑戰性。

✅*谷歌表格：*標籤頁的分離式按鈕暗示有額外的命令可用。點選標籤頁的箭頭按鈕會顯示與標籤相關的命令（不幸的是，這個箭頭按鈕缺乏清晰的視覺標識：按鈕邊框僅在遊標懸停時才顯示）。右鍵點選標籤頁是開啟此選單的另一種方式。

診斷標籤頁設計問題

如果你正在使用分析進行使用者體驗健康檢查，標籤頁設計問題是一個常見發現。如果你在跟蹤頁面內的操作，你可能會發現使用者很少在某些頁面上使用標籤頁。

檢查是否違反了本文的任何最佳實踐。如果是，重新設計你的標籤頁並進行快速A/B測試，以檢查你的重新設計是否更好。

記得也要檢查這些無障礙性考慮因素：

鍵盤導航：確保可以使用鍵盤導航和選擇標籤頁。使用回車鍵或空格鍵來選擇標籤頁。

焦點：標籤頁應該有高對比度的焦點高亮顯示。

ARIA角色：與你的開發人員確認是否使用了適當的ARIA（可訪問富網際網路應用程式）角色和屬性來向輔助技術傳達標籤頁結構。

結論

如果你遵循本文的最佳實踐，使用者將知道如何使用你的標籤頁，而無需進一步探索或容易出錯的猜測。然後，他們可以投入更多的時間和精力來理解這些標籤頁下可用的內容和功能。標籤頁看似乏味，但當做得正確時，它們體現了良好的使用者體驗設計：使用者不會有意識地去思考標籤頁本身——它們只是發揮作用。